<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加网址导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="bg-white p-8 rounded-lg shadow-lg max-w-2xl w-full">
        <h1 class="text-2xl font-bold mb-4">添加网址导航</h1>
        <form id="addUrlForm" class="space-y-4">
            <div>
                <label for="url" class="block text-sm font-medium text-gray-700">网址链接</label>
                <input type="url" id="url" name="url" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" required>
            </div>
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700">网站名称</label>
                <input type="text" id="name" name="name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" required>
            </div>
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700">网站描述</label>
                <textarea id="description" name="description" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" required></textarea>
            </div>
            <div>
                <button type="submit" class="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">保存并生成首页</button>
            </div>
        </form>
    </div>

    <script>
        // 提交表单时发送数据到服务器
        document.getElementById('addUrlForm').addEventListener('submit', async function(event) {
            event.preventDefault();

            const url = document.getElementById('url').value;
            const name = document.getElementById('name').value;
            const description = document.getElementById('description').value;

            // 发送数据到服务器
            try {
                const response = await fetch('/save-url', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ url, name, description }),
                });

                if (response.ok) {
                    const data = await response.json();
                    alert(data.message);
                } else {
                    alert('保存失败，请重试！');
                }
            } catch (error) {
                console.error('请求失败:', error);
                alert('请求失败，请检查网络连接！');
            }

            // 重置表单
            document.getElementById('addUrlForm').reset();
        });
    </script>
</body>
</html>
